<template>
  <!-- 人工认证，法人单位信息比对 -->
  <div class="formDiv">
    <el-form ref="form" size="medium" :model="form" label-width="200px" :rules="rules">

      <div class="title">法人单位信息比对</div>

      <el-form-item label="企业名称：" prop="companyName">
        <div style="display: flex;">
          <el-input v-model.trim="form.companyName" placeholder="请输入企业名称" maxLength="50"></el-input>
          <div style="margin-left: 10px;color: #bbb;">(企业名称需和证件单位名称完全一致)</div>
        </div>
      </el-form-item>
        
      <el-form-item label="统一社会信用代码：" prop="companyCode">
        <div style="display: flex;">
          <el-input v-model.trim="form.companyCode" placeholder="请输入统一社会信用代码" maxLength="18" @input="form.companyCode = form.companyCode.replace(/[^\w]/g,'')"></el-input>
          <div style="margin-left: 10px;color: #bbb;">(请填写正确的18位统一社会信用代码)</div>
        </div>
        <div v-if="companyCodeTipStatus == 1" class="tip">该企业数据正在核验中，待核验通过后进行注册</div>
        <div v-if="companyCodeTipStatus == 2" class="tip">该企业已通过人工认证，请直接到 <a @click="goRegister">注册页面</a> 进行校验注册</div>
      </el-form-item>
        
      <el-form-item label="上传证明文件：" prop="companyCertificateFile">
        <finalUpload
          @changeImgUp="upCCF"
          :limit="1"
          name="上传"
          tip=""
        ></finalUpload>
        <div style="color: #bbb;line-height: 25px;">
          注意事项： <br>
          1、请上传含有18位统一社会信用代码号的登记证件，如：营业执照、统一社会信用代码证书、民办非企业、 <br>
          单位登记证书、律师事务所执业许可证、社会服务机构登记证书、事业单位法人登记证书、社会团体法人登<br>
          记证书、工会法人资格证书、宗教活动场所登记证、基金会法人登记证书、农村集体经济组织登记证。 <br>
          2、证件需有效且原件或扫描件或加盖公章的复印件上传（套拍无效）。 <br>
          3、照片支持.jpg、.jpeg 格式，大小不超过1M。
        </div>
      </el-form-item>

      <div class="title">法定代表人或负责人信息比对</div>
        
      <el-form-item label="法定代表人或负责人姓名：" prop="companyPerson">
        <el-input v-model.trim="form.companyPerson" placeholder="请输入法定代表人或负责人姓名" maxLength="20"></el-input>
      </el-form-item>
        
      <el-form-item label="证件类型：" prop="companyCertificatesType">
        <el-select v-model.trim="form.companyCertificatesType" style="width: 100%" placeholder="请选择证件类型">
          <el-option 
            v-for="item in legalRepresentativeTypes" 
            :value="item.dictValue"
            :key="item.dictValue" 
            :label="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>
        
      <el-form-item label="证件号码：" prop="companyCertificatesNumber">
        <el-input v-model.trim="form.companyCertificatesNumber" placeholder="请输入证件号码" maxLength="30" @input="form.companyCertificatesNumber = form.companyCertificatesNumber.replace(/[^\w]/g,'')"></el-input>
      </el-form-item>
        
      <el-form-item label="上传身份证件：" prop="companyCertificatesFile">
        <div class="up-box">
          <finalUpload
            @changeImgUp="upCCSFF"
            :limit="1"
            name="上传(正面)"
            tip=""
            :size="0.5"
          ></finalUpload>
          <finalUpload
            @changeImgUp="upCCSFB"
            :limit="1"
            name="上传(背面)"
            tip=""
            :size="0.5"
          ></finalUpload>
        </div>
        <div style="color: #bbb;line-height: 25px;">
          注意事项： <br>
          1、证件需有效且原件或扫描件或加盖公章的复印件上传（套拍无效）。<br> 
          2、照片所有信息需清晰可见，内容真实有效，不得做任何修改。 <br>
          3、照片支持.jpg、.jpeg格式，大小不超过500K。
        </div>
      </el-form-item>

      <el-form-item prop="isRead">
        <el-checkbox v-model.trim="form.isRead">
        </el-checkbox>
        <span style="margin-left: 10px">我已阅读并同意</span>
        <span style="color: #045db9" class="agreementDiv">《裕华区政府企业服务用户注册协议》</span>
      </el-form-item>
        
      <el-form-item>
        <div class="btnDiv">
          <Buttons @prev="prev" @submit="submit" :buttons="buttons" class="btns"></Buttons>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import finalUpload from '@/components/finalUpload'
  import { getFormOptions, getNextStep } from "@/common/api/logOrReg.js";
  export default {
    components: {
      finalUpload,
    },
    props: {
      value: {
        type: Number,
        default: 1
      }
    },
    computed:{
      buttons(){
        let btns = [{text:"返回",type:"normal",size:"l",method:"prev"}];
        if(!this.companyCodeTipStatus){
          btns.push({text:"下一步",type:"success",size:"l",method:"submit"})
        } else {
          btns.push({text:"下一步",type:"normal",size:"l",method:"none",disabled:'"true'})
        }
        return btns
      }
    },
    data() {
      return {
        fileArray: ['', ''],
        legalRepresentativeTypes: [],
        form: {
          companyName: null,
          companyCode: null,
          companyCertificateFile: null,
          companyPerson: null,
          companyCertificatesType: null,
          companyCertificatesNumber: null,
          companyCertificatesFile: null,
          companyCertificatesBackFile: null,
          isRead: null
        },
        rules: {
          companyName: [
            { required: true, trigger: 'blur', message: '请输入企业名称' },
          ],
          companyCode: [
            { required: true, trigger: 'blur', message: '请输入统一社会信用代码' },
            { trigger: 'blur', validator: async (rule, value, callback) => {
                let res = await getNextStep({ companyCode: value })
                console.log("res111",res)
                this.companyCodeTipStatus = res.data.status == 3 ? 0 : res.data.status
              }
            }
          ],
          companyCertificateFile: [
            { required: true, trigger: 'blur', message: '请上传证明文件' },
          ],
          companyPerson: [
            { required: true, trigger: 'blur', message: '请输入法定代表人或负责人姓名' },
          ],
          companyCertificatesType: [
            { required: true, trigger: 'blur', message: '请选择证件类型' },
          ],
          companyCertificatesNumber: [
            { required: true, trigger: 'blur', message: '请输入证件号码' },
          ],
          companyCertificatesFile: [
            { required: true, trigger: 'blur', message: '请上传身份证件' },
            { trigger:'blur', validator: (rule, value, callback) => {
                if(!this.form.companyCertificatesFile) {
                  callback(new Error('请上传身份证正面'))
                } else if(!this.form.companyCertificatesBackFile) {
                  callback(new Error('请上传身份证背面'))
                } else {
                  callback()
                }
              }
            }
          ],
          isRead: [
            { required: true, trigger: 'blur', message: '请阅读并同意协议' },
            { trigger:'blur', validator: (rule, value, callback) => {
                if(!value) {
                  callback(new Error('请阅读并同意协议'))
                } else {
                  callback()
                }
              }
            }
          ]
        },
        types: [
          {dictLabel: '类型一', dictValue: 0},
          {dictLabel: '类型二', dictValue: 1}
        ],
        companyCodeTipStatus: 0 // 0不显示 1核验中 2提示注册
      }
    },
    mounted(){
			let ns = this
			ns.getFormOptions()
    },
    methods: {
      goRegister() {
        this.$router.push({path: 'register'})
      },
      async getFormOptions() {
        let res = await getFormOptions({})
        this.legalRepresentativeTypes = res.data.legal_representative_type
			},
      submit() {
				this.$refs['form'].validate((valid) => {
					if(valid) {
            let newForm = {
              ...this.form,
              ...JSON.parse(localStorage.getItem('preForm'))
            }
            localStorage.setItem('preForm', JSON.stringify(newForm))
						this.next()
					}
				})
      },
      upCCF(e) {
        this.form.companyCertificateFile = e.map(el => el.batchId).join(',')
      },
      upCCSFF(e) {
        this.form.companyCertificatesFile = e.map(el => el.batchId).join(',')
      },
      upCCSFB(e) {
        this.form.companyCertificatesBackFile = e.map(el => el.batchId).join(',')
      },
      prev() {
        this.$emit('input', this.value-1)
      },
      next() {
        this.$emit('input', this.value+1)
      }
    }
  }
</script>

<style lang="scss" scoped>
.formDiv {
  margin: 0 auto 100px auto;
  width: 1000px;
  text-align: left;
  transform: translate(10%);
  .title {
    font-size: 14px;
    background: #f1f2f4;
    margin-bottom: 40px;
    padding: 10px 18px;
    border-radius: 2px;
    font-weight: bold;
    transform: translate(-10%);
  }
  >>> .el-form-item__label{
    padding: 0;
  }
  >>> .el-form-item__content {
    .el-input {
      width: 500px;
      .el-input__inner {
        border-radius: 3px;
      }
    }
  }
  .agreementDiv:hover {
    cursor: pointer;
    text-decoration: underline;
  }
  .btn{
    margin: 20px 0;
  }
  // .btnDiv {
  //   display: flex;
  //   .btn {
  //     background-color: #f1f2f4;
  //     color: #045db9;
  //     margin-right: 20px;
  //     width: 100px;
  //     text-align: center;
  //     font-size: 15px;
  //     border-radius: 5px;
  //     &.primary {
  //       background-color: #045db9; color: #f1f2f4
  //     }
  //     &.disable {
  //       background-color: #ccc;
  //       cursor: not-allowed;
  //       color: #fff;
  //       &:hover {
  //         cursor: not-allowed;
  //         box-shadow: none;
  //         transition: none;
  //       }
  //     }
  //     &:hover {
  //       cursor: pointer;
  //       box-shadow: 0px 0px 5px #888888;
  //       transition: all 0.2s ease 0s;
  //     }
  //   }
  // }
  #codeDiv {
    display: flex;
    .el-input {
      >>> .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    } 
    .sendCodeBtn {
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      &:hover {
        cursor: pointer;
        box-shadow: 0px 0px 3px #888888;
        transition: all 0.2s ease 0s;
      }
    }
    .cantSendBtn {
      white-space: nowrap;
      background-color: #f1f2f4;
      color: #045db9;
      width: 120px;
      text-align: center;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
.up-box {
  display: flex;
}
.tip {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #F56C6C;
  a {
    cursor: pointer;
    color: #045db9;
    text-decoration: underline;
  }
}
</style>